<template>
  <el-row style="height:100%">
    <page>
      <el-card>
        <div class="condition">
          <span class="choice-title">所属企业：</span>
          <el-cascader
            v-model="company_id_arr"
            :placeholder="'选择所属企业'"
            collapse-tags
            :options="optionsCom"
            ref="cascaderRef"
            :props="{
              expandTrigger: 'hover',
              multiple: 'true',
            }"
            @visible-change="companyVisibleChange"
            @remove-tag="companyRemoveTag"
            size="small"
            style="width:300px">
          </el-cascader>
          <span class="choice-title">案场选择：</span>
          <el-select
            v-model="case_id"
            @change="CaseChange"
            @visible-change="CaseVisibleChange"
            @remove-tag="CaseClick"
            multiple
            filterable
            collapse-tags
            clearable
            size="small"
            placeholder="请选择案场"
            style="width:300px;display: inline-block">
            <el-option
              v-for="item in optionsCase"
              :key="item.id"
              :label="item.case_name"
              :value="item.id">
            </el-option>
          </el-select>
          <span class="choice-title">区域选择：</span>
          <el-select
            v-model="area_id"
            @change="AreaChange"
            @visible-change="AreaVisibleChange"
            @remove-tag="AreaClick"
            filterable
            multiple
            collapse-tags
            clearable
            ref="areaRef"
            size="small"
            placeholder="请选择区域"
            style="width:300px;display: inline-block">
            <el-option
              v-for="item in optionsArea"
              :key="item.area_id"
              :label="item.area_name"
              :value="item.area_id">
            </el-option>
          </el-select>
        </div>
        <div style="margin-top: 20px">
          <span class="choice-title">推送人员种类：</span>
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <el-checkbox-group v-model="person_type"
                             @change="handleCheckedCitiesChange"
                             :min="1"
                             style="display: inline-block;margin-left: 50px;">
            <el-checkbox v-for="item in person_type_list" :label="item.person_type" :key="item.person_type">{{item.person_name}}</el-checkbox>
          </el-checkbox-group>
        </div>

        <div style="text-align: center;margin-top: 20px">
          <el-button v-show="isChangeOrg" type="primary" size="small" @click="getMember">开启推送</el-button>
          <el-button v-show="!isChangeOrg" size="small" @click="defaultState">停止推送</el-button>
        </div>
        <div v-show="!isChangeOrg" style="text-align: center;margin-top: 20px">
          <span>推送中...</span>
        </div>
      </el-card>
      <ul class="member-list">
        <li v-for="item in personList"
            :key="item.capture_img_url"
            @click="openDialog(item.person_id,item.capture_img_url)">
          <div class="head-img">
            <img :src="item.capture_img_url" alt="">
          </div>
          <div class="member-details">
            <p><i class="el-icon-user"></i>{{item.person_name}}</p>
            <p><i class="el-icon-video-camera"></i>{{item.face_device_name}}</p>
            <p><i class="el-icon-location-information"></i>{{item.area_name}}</p>
            <p><i class="el-icon-time"></i>{{moment(item.capture_time).format('YYYY-MM-DD')}}<br>
              <span style="padding-left: 26px">{{moment(item.capture_time).format('HH:mm:ss')}}</span></p>
          </div>
          <div v-if="item.showNew" class="new-tips">
            <span class="new-tips-text">new</span>
          </div>
          <div class="button-tips"
            :class="[item.person_type == 1 ? 'vip-tips' :
                      item.person_type == 2 ? 'passerby-tips' :
                      item.person_type == 8 ? 'black-tips' : '']">
            <span v-if="item.person_type == 1" class="tips-text">会</span>
            <span v-else-if="item.person_type == 8" class="tips-text">黑</span>
            <span v-else-if="item.person_type == 2" class="tips-text">路</span>
          </div>
        </li>
      </ul>
      <div v-show="isShowMaxLength" style="margin:20px; text-align: center">
        <el-button
          @click="moveData"
          type="primary"
          size="small">查看更多</el-button>
      </div>
    </page>

    <el-dialog v-dialogDrag title="会员详情" :visible.sync="isShow" @close="closeDialog"
               :modal-append-to-body="false" :close-on-click-modal="false" width="95%" to="10px">
      <el-row :gutter="20" class="card-centent">
        <el-col :span="6" style="height: 100%;">
          <el-card class="left-box">
            <div class="details-header">
              <h6>{{person_list_name.name}}基本信息</h6>
              <img :src="personData.person_img_url ? personData.person_img_url : '/static/img/defaultIMG.jpeg'" alt="">
              <p>{{personData.person_name}}/{{personData.sex == 1 ? '男':personData.sex == 0 ?'女':'未知'}}</p>
            </div>
            <div class="details-footer">
              <ul v-show="personData.person_type != 0">
                <li>
                  <span class="details-footer-tit">手机号：</span>
                  <span class="details-footer-centent">{{personData.mobile}}</span>
                </li>
                <li v-show="personData.person_type != 2">
                  <span class="details-footer-tit">{{person_list_name.personNumber}}：</span>
                  <span class="details-footer-centent">{{personData.person_number}}</span>
                </li>
                <li>
                  <span class="details-footer-tit">年龄：</span>
                  <span class="details-footer-centent">{{personData.age}}</span>
                </li>
                <li>
                  <span class="details-footer-tit">{{person_list_name.personDate}}：</span>
                  <span class="details-footer-centent">{{personData.record_date}}</span>
                </li>
              </ul>
            </div>
          </el-card>
        </el-col>
        <el-col :span="18" style="height: 100%;">
          <el-card class="right-box">
            <div>
              <span>所属企业：</span>
              <el-cascader
                v-model="tags_company_id_arr"
                :placeholder="'选择所属企业'"
                collapse-tags
                :options="tags_optionsCom"
                ref="cascaderRef"
                :props="{
                         expandTrigger: 'hover',
                         multiple: 'true',
                        }"
                @visible-change="tags_companyVisibleChange"
                @remove-tag="tags_companyRemoveTag"
                size="small"
                style="width:400px">
              </el-cascader>
              <span style="margin-left: 20px">案场选择：</span>
              <el-select
                v-model="tags_case_id"
                @change="tags_CaseChange"
                filterable
                size="small"
                placeholder="请选择案场"
                style="width:400px;display: inline-block">
                <el-option
                  v-for="item in tags_optionsCase"
                  :key="item.id"
                  :label="item.case_name"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div style="margin: 10px 0px">
              <span>日期选择：</span>
              <el-date-picker
                v-show="activeName != 'areaTrajectory'"
                v-model="tags_start_day"
                @change="getData"
                type="daterange"
                align="right"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                size="small"
                style="width:400px">
              </el-date-picker>
              <el-date-picker
                v-show="activeName == 'areaTrajectory'"
                v-model="tags_day"
                @change="getData"
                type="date"
                align="right"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                placeholder="选择日期"
                size="small"
                style="width:400px">
              </el-date-picker>
              <span v-show="activeName == 'areaInfo'" style="margin-left: 20px">店铺选择：</span>
              <el-select
                v-show="activeName == 'areaInfo'"
                v-model="tags_area_id"
                @change="tags_AreaChange"
                filterable
                ref="areaRef"
                size="small"
                placeholder="请选择区域"
                style="width:400px;display: inline-block">
                <el-option
                  v-for="item in tags_optionsArea"
                  :key="item.area_id"
                  :label="item.area_name"
                  :value="item.area_id">
                </el-option>
              </el-select>
            </div>
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="member-tags">
              <el-tab-pane label="进场频次" name="caseInfo">
                <el-table :data="case_tableData" size="small" stripe max-height="800">
                  <el-table-column label="序号" type="index" align="center" width="60"></el-table-column>
                  <el-table-column label="进场日期" prop="intoTime" align="center"></el-table-column>
                  <el-table-column label="首次进场时间" prop="first_capture_time" align="center"></el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="进店频次" name="areaInfo">
                <el-table :data="area_tableData" size="small" stripe max-height="800">
                  <el-table-column label="序号" type="index" align="center" width="60"></el-table-column>
                  <el-table-column label="进店日期" prop="intoTime" align="center"></el-table-column>
                  <el-table-column label="首次进店时间" prop="first_capture_time" align="center"></el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="逛店轨迹" name="areaTrajectory">
                <el-timeline>
                  <el-timeline-item
                    v-for="(activity, index) in areaTrajectory_tableData"
                    :key="index"
                    placement="top"
                    :timestamp="activity.capture_time">
                    <div class="timestamps">
                      <img :src="activity.capture_face_url ? activity.capture_face_url : ''"
                           class="timestamps-img" @click="showImg(activity)">
                      <p>
                        <i class="el-icon-location-information"></i><span>{{activity.area_name}}</span>
                      </p>
                      <p>
                        <i class="el-icon-video-camera"></i><span>{{activity.device_name}}</span>
                      </p>
                    </div>

                  </el-timeline-item>
                </el-timeline>
              </el-tab-pane>
              <el-tab-pane label="品牌喜好" name="brandLike">
                <el-table :data="brandLike_tableData" size="small" stripe max-height="800">
                  <el-table-column label="序号" type="index" align="center" width="60"></el-table-column>
                  <el-table-column label="品牌名" prop="tag_name" align="center"></el-table-column>
                  <el-table-column label="时段内出现次数" prop="appear_count" align="center"></el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="业态喜好" name="formatLike">
                <el-table :data="formatLike_tableData" size="small" stripe max-height="800">
                  <el-table-column label="序号" type="index" align="center" width="60"></el-table-column>
                  <el-table-column label="业态名" prop="tag_name" align="center"></el-table-column>
                  <el-table-column label="时段内出现次数" prop="appear_count" align="center"></el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </el-dialog>
    <el-dialog v-dialogDrag title="抓拍图像" :visible.sync="isShowImg" @close="showImgUrl = ''"
               :modal-append-to-body="false" :close-on-click-modal="false">
      <img v-show="showImgUrl" :src="showImgUrl" alt="">
      <div v-show="!showImgUrl" style = 'font-size: 20px;color: #b1afaf;text-align: center'>
        <span>无抓拍图像</span>
      </div>
    </el-dialog>
  </el-row>
</template>
<style lang="scss" scoped>
  .condition{
    .choice-title{
      margin-left:10px;
    }
  }
  .member-list{
    width: 100%;
    li{
      position: relative;
      top: 0;
      display: inline-block;
      width: 350px;
      height: 170px;
      background: #fff;
      /*border-radius: 10px;*/
      margin: 10px;
      padding: 10px;
      font-size: 0;
      transition: 0.5s;
      cursor: pointer;
      &:hover{
        position: relative;
        top:-5px;
        box-shadow: 5px 5px 4px 0px #d2d1d1;
      }
      .head-img{
        width: 150px;
        height: 150px;
        float: left;
        font-size:0px;
        line-height:150px;
        text-align: center;
        img{
          max-height: 100%;
          max-width: 100%;
          min-width:120px;
          vertical-align: middle;
        }
      }
      .member-details{
        width: 170px;
        height: 100%;
        float: right;
        font-size:12px;
        p{
          width: 160px;
          display: inline-block;
          vertical-align: top;
          margin-bottom: 5px;
          i{
            margin-right: 10px;
          }
        }

      }
      .new-tips{
        position: absolute;
        top: -20px;
        right: -20px;
        width: 0;
        height: 0;
        border: 20px solid red;
        border-bottom-color: transparent;
        border-left-color: transparent;
        border-right-color: transparent;
        transform: rotate(-135deg);
        .new-tips-text{
          display: inline-block;
          color: #fff;
          position: absolute;
          top: -24px;
          left: -14px;
          font-size: 12px;
          transform: rotate(180deg) scale(0.8);
        }
      }
      .button-tips{
        position: absolute;
        bottom: -20px;
        right: -20px;
        width: 0;
        height: 0;
        transform: rotate(-45deg);
        .tips-text{
          display: inline-block;
          color: #fff;
          position: absolute;
          top: -24px;
          left: -8px;
          font-size: 12px;
          -webkit-transform: rotate(180deg) scale(0.8);
          -ms-transform: rotate(180deg) scale(0.8);
          transform: rotate(0deg) scale(0.8);
        }
      }
      .vip-tips{
        border: 20px solid #67c23a;
        border-bottom-color: transparent;
        border-left-color: transparent;
        border-right-color: transparent;
      }
      .black-tips{
        border: 20px solid black;
        border-bottom-color: transparent;
        border-left-color: transparent;
        border-right-color: transparent;
      }
      .passerby-tips{
        border: 20px solid #ccc;
        border-bottom-color: transparent;
        border-left-color: transparent;
        border-right-color: transparent;
      }
    }
  }
  .card-centent{
    width: 100%;
    padding: 15px 0px;
    height: 90%;
    .left-box{
      text-align: center;
      height: 100%;
      .details-header{
        border-bottom:1px solid #ccc;
        h6{
          border-left:5px solid #0c78dd;
          text-align: left;
          padding-left: 10px;
        }
        img{
          width: 200px;
          display: inline-block;
          margin: 20px 0;
        }
        p{
          font-size: 18px;
          font-weight: 500;
          margin-bottom:10px;
        }
      }
      .details-footer{
        margin-top: 20px;
        ul{
          li{
            text-align: left;
            padding: 10px;
            .details-footer-tit{
              width: 92px;
              display: inline-block;
              font-size: 16px;
              font-weight: 400;
            }
            .details-footer-centent{
              font-size: 18px;
              color:#847f8c;
            }
          }
        }
      }
    }
    .right-box{
      height: 100%;
    }
  }
  .member-tags{
    max-height: 1000px;
    .el-tab-pane{
      max-height: 700px;
      overflow: auto;
    }
  }
  .timestamps{
    height: 80px;
    margin-top: 10px;
    position: relative;
    .timestamps-img{
      display: inline-block;
      width: 80px;
      height: 80px;
      position: absolute;
      top: 0px;
      left: 0px;
      cursor:pointer;
    }
    p{
      width: 100%;
      height: 30px;
      display: inline-block;
      i{
        display: inline-block;
        margin-left: 100px;
        margin-right: 10px;
      }
    }
  }
</style>

<script>
  let moment = require("moment");
  import page from "@/components/page/page";
  import pageheader from "@/components/page/pageheader";
  export default {
    data() {
      return {
        optionsCom:[],//企业树
        company_id:null,
        company_id_arr:[],
        case_id:[],
        optionsCase:[],
        area_id:null,
        optionsArea:[],
        personList:[],
        isIndeterminate:false,
        checkAll:true,
        person_type:['1','8','2'],//会员，黑名单，路人
        person_type_list:[
          {
            person_type:'1',
            person_name:'会员'
          },
          {
            person_type:'8',
            person_name:'黑名单'
          },
          {
            person_type:'2',
            person_name:'路人'
          },
        ],

        moment:require("moment"),
        setIntervalGetMemberList:null,
        nowDateTime:null,
        yesterDayDateTime:null,
        end_no:0,//当前的最大出现人数
        yesterday_no:0,//昨天的最大出现人数
        isChangeOrg:true,//头部信息是否有过改变
        maxLength:5,//当前显示最大人员数据
        isShowMaxLength:false,

        personData:{
          person_img_url:'',
          person_img_base64:'',
          person_name:'',
          age:'',
          sex:'1',
          mobile:'',
          person_number:'',
          ext_number:'',
          record_date_str:'',
          album_id:'',
        },//会员详情详细数据
        person_list_name:{
          name:'',
          personNumber:'',
          personDate:''
        },
        tags_optionsCom:[],
        tags_company_id_arr:[],
        tags_company_id:null,
        tags_case_id:'',
        tags_optionsCase:[],
        tags_area_id:'',
        tags_optionsArea:[],
        tags_start_day:[moment(new Date()).subtract(6, 'days').format("YYYY-MM-DD"),moment(new Date()).format("YYYY-MM-DD")],
        tags_day:moment(new Date()).format("YYYY-MM-DD"),

        case_tableData:[],
        area_tableData:[],
        areaTrajectory_tableData:[],
        brandLike_tableData:[],
        formatLike_tableData:[],
        isShowImg:false,
        showImgUrl:'',

        activeName:'caseInfo',//会员详情中的tags名称
        transitionTime:1000 * 60 * 5,
        setInterTime: 2000,
        pageTitle:'会员信息',
        isShow:false,
        pickerOptions: {                //时间日期控件规则
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6;   //正常 今天之前
          },
          shortcuts: [
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            }
          ]
        },
      }
    },
    components: {
      page,
      pageheader,
    },
    created() {
      this.$Bus.$emit('Loading',false)
      this.getReady()
    },
    mounted(){

    },
    beforeDestroy(){
      this.clearInterval()
    },
    methods:{
      //页面初始化,获取企业信息，拿到第一个企业调用获取案场
      getReady(){
        console.log('getReady');
        let url = '/sys/report_assist_new/company_tree';
        this.$api.get(url)
        .then(data => {
          if(data){
            recursion(data.data);
            function recursion(val) {
              if(val.length){
                for(let i in val){
                  val[i].value = val[i].id;
                  val[i].label = val[i].company_name;
                  val[i].parent_id_str = val[i].parent_name_list ? val[i].parent_name_list.join('/') : '';
                  if(val[i].children && val[i].children.length){
                    recursion(val[i].children)
                  }else{
                    delete val[i].children
                  }
                }
              }
            }
            this.$nextTick(()=>{
              let arr = [];
              recursionData(Array.of(data.data[0]))
              function recursionData(val) {
                if(val.length){
                  for(let i in val){
                    if(val[i].children){
                      recursionData(val[i].children)
                    }else{
                      arr.push(val[i].node_location.split('-').slice(0,-1))
                      delete val[i].children
                    }
                  }
                }
              }
              this.optionsCom = data.data;
              let company_id_arr = [];//配置当前第一个选中的值
              arr.map(x=>{
                for(let i = 0 ; i < x.length;i++){
                  if(x[i] == data.data[0].id){
                    company_id_arr.push(x.slice(i,x.length))
                  }
                }
              });
              this.company_id_arr = company_id_arr;
              this.company_id = company_id_arr.join(',');
              this.getCaseApi(company_id_arr);
            })
          }
        })
        .catch(err=>{
          console.log(err,'企业');
          this.optionsCom = [];
        })
      },
      //get案场列表api
      getCaseApi(arr,org_type=1){
        let lsarr=[];
        for(let i in arr) {
          lsarr.push(arr[i][arr[i].length-1])
        }
        let params={
          org_id_list:lsarr,
          org_type:org_type
        }
        let url='/sys/report_assist_new/case_list';
        this.$api.post(url,params)
        .then(data=>{
          this.optionsCase = [];
          if(data.data&&data.data.length){
            this.optionsCase = data.data;
            this.case_id = Array.of(data.data[0].id)
            this.getAreaApi();
          } else{
            this.$message.warning('该企业下无案场');
            this.optionsCase = [];
            this.optionsArea = [];
            this.case_id = null;
            this.area_id=[];
            this.$Bus.$emit('Loading',false);
          }
        })
        .catch(err=>{
           console.log(err)
          this.$message.warning('该企业下无案场');
          this.optionsCase = [];
          this.optionsArea = [];
          this.case_id = null;
          this.area_id = null;
        })
      },
      //区域列表()
      getAreaApi(org_type=2){
        if(this.case_id==null || this.case_id.length == 0) {
          this.$message.warning('该企业下无案场!');
          this.$Bus.$emit('Remove');
          this.$Bus.$emit('Loading',false);
          this.area_id = [];
          this.optionsArea = [];
          return ;
        }
        //初始化设置区域多选
        let params={
          org_id_list:this.case_id,
          org_type:org_type
        }

        let url='/sys/report_assist_new/find_area'
        this.$api.post(url,params)
        .then(data=>{
          this.area_id = [];
          this.optionsArea = [];
          if(data.data){
            if(data.data.length){
              this.optionsArea = data.data.map(x=>{
                if(x.tags && x.tags.includes(-1)) {
                  x.area_name = '[排除]'+ x.area_name
                }
                return x
              })
              //默认全选状态
              this.area_id.push(this.optionsArea[0].area_id);
              this.$nextTick(()=>{
                this.changeBgColor()
              });
            }
          }
          this.$Bus.$emit('Loading',false);
        })
        .catch(err=>{
          console.log(err);
          this.$message.warning('该案场下无区域');
          this.area_id = [];
          this.optionsArea = []
          this.$Bus.$emit('Loading',false);
        })
      },
      //企业选择触发事件
      companyVisibleChange(val){
        if(!val){
          this.companyChange();
          this.defaultState()
        }
      },
      //企业移除tag时触发
      companyRemoveTag(val){
        this.defaultState()
        this.$nextTick(()=>{
          if(this.company_id_arr.length){
            this.companyChange()
          }else{
            this.optionsCase=[];
            this.case_id=[];
            this.optionsArea=[];
            this.area_id=[];
          }
        })
      },
      //企业选择改变
      companyChange(){
        if(!this.company_id_arr.length) {
          this.optionsCase=[];
          this.case_id=[];
          this.optionsArea=[];
          this.area_id=[];
        }
        this.$Bus.$emit('Loading',true);
        let company_id_arr = this.company_id_arr.map(x => {
          return x.slice(-1)[0]
        });
        this.company_id = company_id_arr.join(',')
        this.getCaseApi(this.company_id_arr);
      },
      //案场change事件
      CaseChange(val){
        this.defaultState()
        if(val.length == 0){
          this.area_id = [];
          this.optionsArea=[];
        }
      },
      //案场选择改变
      CaseVisibleChange(val) {
        if (!val) {
          this.defaultState()
          if (this.case_id == null || this.case_id.length==0) {
            this.area_id = [];
            this.optionsArea=[];
            return
          }
          this.getAreaApi();
        }
      },
      //案场多选删除事件
      CaseClick(){
        this.defaultState()
        if (this.case_id == null || this.case_id.length==0) {
          this.area_id = [];
          this.optionsArea=[];
        }
      },
      AreaChange() {
        this.defaultState()
        this.changeBgColor()
      },
      //区域选择改变
      AreaVisibleChange(val){
        if(!val){
          this.defaultState()
          this.changeBgColor()
        }
      },
      AreaClick(){
        this.defaultState()
        this.changeBgColor()
      },
      //改变下拉框中选中的字体颜色
      changeBgColor(){
        $('.el-select__tags').find('.el-select__tags-text').each(function (i) {
          if($(this).html().includes('[排除]')){
            // $(this).parent().css({background:'#f56c6c'})
            $(this).css({color:'#f56c6c'})
          }else{
            $(this).css({color:'#777'})
          }
        })
      },

      handleCheckAllChange(val){
        this.defaultState()
        this.person_type = val ? this.person_type_list.map(x=>{
          return x.person_type
        }) : ['1'];
        this.isIndeterminate = !this.isIndeterminate;
      },
      handleCheckedCitiesChange(val){
        this.defaultState()
        let checkedCount = val.length;
        this.checkAll = checkedCount === this.person_type_list.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.person_type_list.length;
      },

      //获取查询结果
      getMember(){
        let org_id_list = [];
        let org_type = 3;
        let person_type = this.person_type; //人员类型 8:黑名单 , 8:自定义 , 1:会员 , 2:路人 , 3:员工库 多个逗号分隔
        //先判断是否选择到区域一级；
        if(!this.area_id || this.area_id.length == 0){
          // 如果没选区域一级，往下判断是否选择了案场一级
          if(!this.case_id || this.case_id.length == 0){
            //如果也没选案场一级，往下判断是否选择了企业一级
            if(!this.company_id_arr || this.company_id_arr.length == 0){
              //如果也没选案场一级，往下判断是否选择了企业一级
              this.$message.warning('请至少选择一个企业')
              return
            }else{
              org_id_list = this.company_id_arr.map(x => {
                return x.slice(-1)[0]
              });
              org_type = 1
            }
          }else{
            org_id_list = this.case_id;
            org_type = 2
          }
        }else{
          org_id_list = this.area_id;
          org_type = 3
        }
        let params = {
          org_id_list:org_id_list,
          org_type:org_type,
        }

        this.isChangeOrg = false;//将头部信息是否修改状态改为false；
        let updata = async ()=>{
          let start_no = 0;
          let end_no = 0;

          let DateTime = await this.getNowDate()//获取到当前系统时间
          let start_time = this.moment(DateTime - (1000 * 60 * 60 * 12)).format('YYYY-MM-DD HH:mm:ss')//获取到当前时间 前推12小时
          let numPeople = await this.getPersonAppearCount(params,start_time,person_type);//获取当前出现人数；

          //判断当前出现人数是否超过了最大显示人数，如果没超过则不再显示查看更多按钮
          if(numPeople > this.maxLength){
            this.isShowMaxLength = true;
          }else{
            this.isShowMaxLength = false;
          }

          //先获取一下最新的end_on，跟当前的做对比，如果相同则return，如果不同时则获取最新的数据
          if(this.end_no == numPeople){
            return;
          }else{
            //先判断缓存的this.end_no是否为0
            if(this.end_no == 0){
              //如果是0的话说明是第一次请求;则默认显示最后的三十条数据；
              start_no = (numPeople - this.maxLength ) > 0 ? (numPeople - this.maxLength ) : 0;
              end_no = numPeople;
            }else{
              //否则传递新增条目数量
              start_no = this.end_no
              end_no = numPeople
            }
          }
          this.end_no = numPeople
          let personAppearList = await this.getPersonAppearList(params,start_time,person_type,start_no,end_no)
          let personList = personAppearList[0]
          //防止异步请求时数据还没返回时，店家停止推送
          if(this.isChangeOrg){
            console.log('！！！');
            return;
          }

          for (let i in personList) {
            let setTimeoutDate = this.transitionTime - (DateTime - personList[i].capture_time)
            if (DateTime - personList[i].capture_time > this.transitionTime) {
              personList[i].showNew = false
            } else {
              personList[i].showNew = true
              setTimeout(() => {
                personList[i].showNew = false
              }, setTimeoutDate);
            }

            if (this.isMove) {
              let list = []
              list.unshift(personList[i])
              this.personList = list
              this.isMove = false;

            } else {
              this.personList.unshift(personList[i]);
              if (this.personList.length > this.maxLength) {
                this.personList.pop();
              }
            }

          }
          this.end_no = personAppearList[1];

        }


        //在开始之前先删除定时器任务；
        this.clearInterval()
        updata().then(()=>{
          // console.log('第一次成功后，开始执行定时器');
          this.setIntervalGetMemberList = setInterval(updata,this.setInterTime);
        }).catch(err=>{
          console.log(err);
          this.personList = [];
        })
      },

      //获取后台当前时间
      getNowDate(){
        let p = new Promise((res,rej)=>{
          let url = '/sys/report_assist_new/sys_date'
          this.$api.post(url)
          .then(data=>{
            res(data.data)
          })
          .catch(err=>{
            rej(err)
          })
        })
        return p
      },
      //查询出现人数
      getPersonAppearCount(params,DateTime,person_type){
        let p = new Promise((res,rej)=>{
          let url = '/sys/face_report/person_appear_count?date_time='+ DateTime + '&person_type_list='+ person_type
          this.$api.post(url,params)
          .then(data=>{
            // console.log(data);
            res(data.data)
          })
          .catch(err=>{
            console.log(err);
            rej(err)
          })
        })
        return p
      },
      //查询出现人员数组
      getPersonAppearList(params,DateTime,person_type,start_no,end_no){
        let p = new Promise((res,rej)=>{
          let url = '/sys/face_report/person_appear_list?date_time='+ DateTime + '&person_type_list='+ person_type +
            '&start_no='+ start_no + '&end_no='+ end_no
          this.$api.post(url,params)
          .then(data=>{
            console.log(data,'getPersonAppearList');
            let list = []
            if(data.data && data.data.list.length){
              list = data.data.list
            }
            res([list,data.data.end_no])
          })
          .catch(err=>{
            console.log(err);
            rej(err)
          })
        })
        return p
      },

      //打开模态框，显示会员详细信息
      openDialog(id,url){
        this.isShow = true
        this.$Bus.$emit('Loading',true)
        let asyncFun = async ()=>{
          await this.getPerson(id,url)
          await this.getCompany()
          await this.getCase()
          if(this.activeName == 'areaInfo'){
            await this.getArea();
          }
        }
        asyncFun().then(data=>{
          this['get_'+ this.activeName]()
        })
        .catch(err=>{
          console.log(err);
          this.$Bus.$emit('Loading',false)
        })
      },
      //获取企业树
      getCompany(){
        let p = new Promise((res,rej)=>{
          let url = '/sys/report_assist_new/company_tree';
          this.$api.get(url)
          .then(data => {
            if(data){
              recursion(data.data);
              function recursion(val) {
                if(val.length){
                  for(let i in val){
                    val[i].value = val[i].id;
                    val[i].label = val[i].company_name;
                    val[i].parent_id_str = val[i].parent_name_list ? val[i].parent_name_list.join('/') : '';
                    if(val[i].children && val[i].children.length){
                      recursion(val[i].children)
                    }else{
                      delete val[i].children
                    }
                  }
                }
              }
              this.$nextTick(()=>{
                let arr = [];
                recursionData(Array.of(data.data[0]))
                function recursionData(val) {
                  if(val.length){
                    for(let i in val){
                      if(val[i].children){
                        recursionData(val[i].children)
                      }else{
                        arr.push(val[i].node_location.split('-').slice(0,-1))
                        delete val[i].children
                      }
                    }
                  }
                }
                this.tags_optionsCom = data.data;
                let company_id_arr = [];//配置当前第一个选中的值
                arr.map(x=>{
                  for(let i = 0 ; i < x.length;i++){
                    if(x[i] == data.data[0].id){
                      company_id_arr.push(x.slice(i,x.length))
                    }
                  }
                });
                this.tags_company_id_arr = this.company_id_arr;
                this.tags_company_id = this.company_id_arr.join(',');
                res();
              })
            }
          })
          .catch(err=>{
            this.tags_optionsCom = [];
            this.tags_optionsCase = [];
            this.tags_company_id_arr = [];
            this.tags_company_id = null;
            this.tags_case_id = '';
            rej('未获取到企业树')
          })
        })
        return p
      },
      //获取案场
      getCase(){
        let p = new Promise((res,rej)=>{
          let lsarr=[];
          let company_id_arr = this.tags_company_id_arr
          for(let i in company_id_arr) {
            lsarr.push(company_id_arr[i][company_id_arr[i].length-1])
          }
          let params={
            org_id_list:lsarr,
            org_type:1
          }
          let url='/sys/report_assist_new/case_list'
          this.$api.post(url,params)
          .then(data=>{
            this.tags_optionsCase = [];
            this.tags_case_id = '';
            console.log(data.data);
            if(data.data && data.data.length){
              this.tags_optionsCase = data.data;
              this.tags_case_id = this.case_id.length ? this.case_id[0] : data.data[0].id;
              res();
            } else{
              this.tags_optionsCase = [];
              this.tags_case_id = '';
              rej('该企业下无案场?')
            }
          })
          .catch(err=>{
            this.tags_optionsCase = [];
            this.tags_case_id = '';
            rej('该企业下无案场!')
          })
        })
        return p
      },
      //获取区域
      getArea(){
        let p = new Promise((res,rej)=>{
          if(!this.tags_case_id) {
            this.$message.warning('该企业下无案场!');
            this.tags_area_id = '';
            this.tags_optionsArea = [];
            rej()
            return;
          }
          //初始化设置区域多选
          let params={
            org_id_list:Array.of(this.tags_case_id),
            org_type:2
          }

          let url='/sys/report_assist_new/find_area'
          this.$api.post(url,params)
          .then(data=>{
            this.tags_area_id = '';
            this.tags_optionsArea = [];
            if(data.data && data.data.length){
              this.tags_optionsArea = data.data.map(x => {
                if (x.tags && x.tags.includes(-1)) {
                  x.area_name = '[排除]' + x.area_name
                }
                return x
              })
              this.tags_area_id = this.tags_optionsArea[0].area_id;
              this.$nextTick(() => {
                this.changeBgColor()
                res()
              });
            }
          })
          .catch(err=>{
            console.log(err);
            this.tags_area_id = '';
            this.tags_optionsArea = []
            rej(err)
          })
        })
        return p
      },
      //进场频率页面
      get_caseInfo(){
        if(!this.tags_case_id){
          this.$message.warning('请选择案场')
          return;
        }
        if(!this.tags_start_day){
          this.$message.warning('请选择日期')
          return;
        }
        this.$Bus.$emit('Loading', true)
        this.case_tableData = []
        let url = '/sys/face_report/person_case_frequency?case_info_id='+ this.tags_case_id +
          '&person_id='+ this.personData.person_id + '&start_day=' +this.tags_start_day[0] + '&end_day=' +this.tags_start_day[1]
        this.$api.post(url)
        .then(data=>{
          console.log(data)
          if(data.data && data.data.length){
            this.case_tableData = data.data.map(x=>{
              x.intoTime = moment(x.first_capture_time).format('YYYY-MM-DD')
              x.first_capture_time = moment(x.first_capture_time).format('HH:mm:ss')
              return x
            })
          }
          this.$Bus.$emit('Loading', false)
        })
        .catch(err=>{
          console.log(err);
          this.$Bus.$emit('Loading', false)
        })
      },
      //进店频次
      get_areaInfo(){
        console.log('get_areaInfo');
        if(!this.tags_area_id){
          this.$message.warning('请选择店铺')
          return;
        }
        if(!this.tags_start_day){
          this.$message.warning('请选择日期')
          return;
        }
        this.$Bus.$emit('Loading', true)
        this.area_tableData = []
        let url = '/sys/face_report/person_area_frequency?area_id='+ this.tags_area_id +
          '&person_id='+ this.personData.person_id + '&start_day=' +this.tags_start_day[0] + '&end_day=' +this.tags_start_day[1]
        this.$api.post(url)
        .then(data=>{
          console.log(data)
          if(data.data && data.data.length){
            this.area_tableData = data.data.map(x=>{
              x.intoTime = moment(x.first_capture_time).format('YYYY-MM-DD')
              x.first_capture_time = moment(x.first_capture_time).format('HH:mm:ss')
              return x
            })
          }
          this.$Bus.$emit('Loading', false)
        })
        .catch(err=>{
          console.log(err);
          this.$Bus.$emit('Loading', false)
        })
      },
      //进店频次
      get_areaTrajectory(){
        if(!this.tags_case_id){
          this.$message.warning('请选择案场')
          return;
        }
        if(!this.tags_day){
          this.$message.warning('请选择日期')
          return;
        }
        this.$Bus.$emit('Loading', true)
        this.areaTrajectory_tableData = []
        let url = '/sys/face_report/face_area_track?case_info_id='+ this.tags_case_id +
          '&person_id='+ this.personData.person_id + '&start_day=' +this.tags_day + '&end_day=' +this.tags_day
        this.$api.post(url)
        .then(data=>{
          console.log(data)
          if(data.data && data.data.length){
            this.areaTrajectory_tableData = data.data.map(x=>{
              x.capture_time = moment(x.capture_time).format('YYYY-MM-DD HH:mm:ss')
              return x
            })
          }
          this.$Bus.$emit('Loading', false)
        })
        .catch(err=>{
          console.log(err);
          this.$Bus.$emit('Loading', false)
        })
      },
      //品牌喜好
      get_brandLike(){
        if(!this.tags_case_id){
          this.$message.warning('请选择案场')
          return;
        }
        if(!this.tags_start_day){
          this.$message.warning('请选择日期')
          return;
        }
        this.$Bus.$emit('Loading', true)
        this.brandLike_tableData = []
        let params = {
          org_id_list:Array.of(this.tags_case_id),
          org_type:2
        }
        let url = '/sys/face_report/person_tag_sum?person_id='+ this.personData.person_id +
          '&tag_type=5&tags=2&start_day=' +this.tags_start_day[0] + '&end_day=' +this.tags_start_day[1]
        this.$api.post(url,params)
        .then(data=>{
          console.log(data)
          if(data.data && data.data.length){
            this.brandLike_tableData = data.data
          }
          this.$Bus.$emit('Loading', false)
        })
        .catch(err=>{
          console.log(err);
          this.$Bus.$emit('Loading', false)
        })
      },
      //业态喜好
      get_formatLike(){
        if(!this.tags_case_id){
          this.$message.warning('请选择案场')
          return;
        }
        if(!this.tags_start_day){
          this.$message.warning('请选择日期')
          return;
        }
        this.$Bus.$emit('Loading', true)
        this.formatLike_tableData = []
        let params = {
          org_id_list:Array.of(this.tags_case_id),
          org_type:2
        }
        let url = '/sys/face_report/person_tag_sum?person_id='+ this.personData.person_id +
          '&tag_type=3&tags=2&start_day=' +this.tags_start_day[0] + '&end_day=' +this.tags_start_day[1]
        this.$api.post(url,params)
        .then(data=>{
          console.log(data)
          if(data.data && data.data.length){
            this.formatLike_tableData = data.data
          }
          this.$Bus.$emit('Loading', false)
        })
        .catch(err=>{
          console.log(err);
          this.$Bus.$emit('Loading', false)
        })
      },

      //根据id获取会员详情
      getPerson(id,imgurl){
        let p = new Promise((res,rej)=>{
          let url = '/sys/face_person/get?person_id='+ id
          this.$api.get(url)
          .then(data=>{
            console.log(data,'Person');
            data.data.record_date = moment(data.data.record_date).format('YYYY-MM-DD HH:mm:ss');
            data.data.sex = String(data.data.sex);
            Object.assign(this.personData,data.data);
            console.log(this.personData,'this.personData');
            switch (this.personData.person_type){
              case 1 :
                this.person_list_name.name = '会员'
                this.person_list_name.personNumber = '会员号'
                this.person_list_name.personDate = '入会日期'
                break;
              case 8 :
                this.person_list_name.name = '黑名单'
                this.person_list_name.personNumber = '黑名单号'
                this.person_list_name.personDate = '拉黑日期'
                break;
              case 2 :
                this.person_list_name.name = '路人'
                this.person_list_name.personDate = '首次抓拍时间'
                break;
              case 0 :
                this.person_list_name.name = ''
                this.personData.person_img_url = imgurl
                break;
            }
            res()
          })
          .catch(err=>{
            console.log(err);
            rej(err)
          })
        })
        return p
      },
      //关闭模态框
      closeDialog(){
        this.personData = {
          person_img_url: '',
          person_img_base64: '',
          person_name: '',
          age: '',
          sex: '1',
          mobile: '',
          person_number: '',
          ext_number: '',
          record_date_str: '',
          album_id: '',
        }//会员详情详细数据
        this.defaultData()
      },
      //关闭定时器
      clearInterval(){
        clearInterval(this.setIntervalGetMemberList);
        this.setIntervalGetMemberList = null
      },

      //恢复默认状态
      defaultState(){
        this.isChangeOrg = true;
        this.maxLength =5
        this.isShowMaxLength = false
        this.personList = [];
        this.end_no = 0;
        this.clearInterval()
      },

      //进场频次企业change事件
      tags_companyVisibleChange(val){
        if(!val){
          this.tags_companyChange();
        }
      },
      //进场频次企业change事件
      tags_companyRemoveTag(){
        this.$nextTick(()=>{
          if(this.tags_company_id_arr.length){
            this.tags_companyChange()
          }else{
            this.tags_optionsCase=[];
            this.tags_case_id='';
          }
        })
      },
      tags_companyChange(){
        if(!this.tags_company_id_arr.length) {
          this.tags_optionsCase=[];
          this.tags_case_id='';
        }
        let company_id_arr = this.tags_company_id_arr.map(x => {
          return x.slice(-1)[0]
        });
        this.tags_company_id = company_id_arr.join(',')

        this.defaultData()
        this.getCase().then(()=>{
          if(this.activeName == 'areaInfo'){
            this.getArea().then(()=>{
              this.getData()
            })
            .catch(err=>{
              console.log(err);
              this.$message.warning(err)
            })
          }else{
            this.getData()
          }
        })
        .catch(err=>{
          console.log(err);
          this.$message.warning(err);
        })
      },

      tags_CaseChange(){
        this.case_tableData = [];
        this.area_tableData=[]
        if(this.activeName == 'areaInfo'){
          this.getArea().then(()=>{
            this.getData()
          })
          .catch(err=>{
            console.log(err);
            this.$message.warning(err)
          })
        }else{
          this.getData()
        }
      },

      tags_AreaChange(){
        this.defaultData()
        this.getData()
      },
      getData(){
        this['get_'+ this.activeName]()
      },
      showImg(data){
        console.log(data);
        this.isShowImg = true
        this.showImgUrl = data.capture_panorama_url ? data.capture_panorama_url : data.capture_face_url ? data.capture_face_url : ''
      },
      //改变下拉框中选中的字体颜色
      changeBgColor(){
        $('.el-select__tags').find('.el-select__tags-text').each(function (i) {
          if($(this).html().includes('[排除]')){
            // $(this).parent().css({background:'#f56c6c'})
            $(this).css({color:'#f56c6c'})
          }else{
            $(this).css({color:'#777'})
          }
        })
      },
      //标签切换
      handleClick(tab,event){
        this.$Bus.$emit('Loading',true)

        if(this.activeName == 'areaInfo'){
          this.getArea().then(()=>{
            this.getData()
          })
        }else{
          this.tags_area_id = '';
          this.tags_optionsArea = [];
          this.getData()
        }
      },
      defaultData(){
        this.case_tableData = [];
        this.area_tableData=[];
        this.areaTrajectory_tableData=[];
        this.brandLike_tableData=[];
        this.formatLike_tableData=[];
      },
      moveData(){
        console.log('moveData');
        this.maxLength += 5
        this.end_no = 0;
        this.isMove = true
        console.log(this.maxLength,'maxLength');
        this.getMember()
      }
    }
  }
</script>

